//* {
//  --el-border-color: #000000;
//  --el-border-color-hover: #595959;
//  --el-color-primary: #8a8989;
//  --text-color: rgb(171, 178, 191);
//  --el-color-primary-light-3: #2e2e2e;
//  --el-color-primary-dark-2: #1f1f1f;
//  --el-fill-color-light: #8a8989;
//  --el-text-color-placeholder: #6e6e6e;
//  --el-text-color-regular: #d5d5d5;
//}
:deep(.el-input__wrapper) {
  //background: #2C313A;
}
:deep(.el-tabs__nav-wrap) {
  //background-color: #23272e;
}
.main {
  width: 100%;
  // height: calc(100vh - 80px);
  min-width: 1285px;
  // padding: 10px;
  // background-color: aliceblue;
  // background: url(@/assets/image/gatewayBg.png);

  //background: rgb(24, 26, 31);
  //color: rgb(171, 178, 191);

  .title {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 2px;
  }

  .container-box {
    margin-left: 20px;
    padding-top: 10px;
    height: calc(100% - 20px);

    :deep(.el-aside) {
      padding: 0 10px;
      //background-color: #23272e;
      background-color: #fff;
    }

    .module-title {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .addBtn{
        background: #1E5AFF;
        border-radius: 2px;
        padding: 4px 18px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;
        line-height: 17px;
        text-align: left;
        font-style: normal;
        cursor: pointer;
        user-select: none;
      }

      .title{
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #162949;
        line-height: 25px;
        text-align: left;
        font-style: normal;
      }

      @keyframes rotateBack {
        from {
          transform: rotate(90deg);
        }
        to {
          transform: rotate(0);
        }
      }
      .addBtn {
        cursor: pointer;
        // animation: rotateBack 200ms linear;
      }
      @keyframes rotate {
        from {
          transform: rotate(0);
        }
        to {
          transform: rotate(90deg);
        }
      }
      .addBtn:hover {
        // animation: rotate 200ms linear;
      }
    }

    .search {
      margin-bottom: 10px;
      //background: #2C313A;
    }

    .type {
      margin-bottom: 10px;
    }

    .list {
      min-height: 50px;
      max-height: calc(100% - 128px);
      //background: #1E2227;
      overflow: auto;

      li {
        padding: 5px 10px;
        cursor: pointer;
      }
      li:hover {
        //background: #2C313A;
        background: #ffffff;
      }
    }

    :deep(.el-main) {
      padding-top: 0;
      padding-bottom: 0;
      overflow: auto;
    }

    .container-box-main {
      height: 100%;
      //background-color: #23272e;
      background-color: #fff;

      :deep(.is-active) {
        //color: var(--text-color) !important;
        //border-color: #000000;
      }
      :deep(.el-tabs__item) {
        //color: #4b4b4b;
      }
      :deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
        //border-left-color: black;
      }
      :deep(.el-steps) {
        padding: 20px;
        //border: 2px solid #525252;
        margin-bottom: 20px;
      }
      :deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
        border: none;
      }
      :deep(.el-tabs__content) {
        margin: 0 10px 0 10px;
        height: calc(100% - 55px);
      }
    }
  }
}

:deep(.el-tabs) {
  height: 100%;
}
:deep(.el-tabs_content) {
  height: calc(100% - 55px);
}
:deep(.el-tab-pane) {
  height: 100%;
}
:deep(.el-select .el-select__tags .el-tag--info) {
  //background-color: #252525;
}
:global(.el-select-dropdown__item.hover, .el-select-dropdown__item:hover) {
  //background-color: #8a8989;
  //color: #FFFFFF;
}
:global(.el-select-dropdown.is-multiple .el-select-dropdown__item.selected) {
  //background-color: #252525;
  //color: #FFFFFF;
}
.moduleContainer {
  background: rgba(255, 255, 255, 0.6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  border: 1px solid #487bd8;
  padding: 16px 12px;
  margin-bottom: 25px;
  &.noFlex{
    display: block;
  }
  .titleContent {
    display: flex;
    align-items: center;
    .titleIcon {
      width: 25px;
      height: 21px;
      margin-right: 7px;
    }
    .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #162949;
      line-height: 30px;
      text-align: left;
      font-style: normal;
    }
  }
  .dataCardList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 18px;
    min-height: 230px;
    .dataCard {
      width: 48%;
      height: 89px;
      // background: #f5f5f5;
      // border-radius: 10px;
      padding: 20px;
      margin-bottom: 18px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .dataCardTitle {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #25386d;
        line-height: 22px;
        text-align: left;
        font-style: normal;
      }
      .dataCardNum {
        font-family: DingTalk JinBuTi;
        font-weight: normal;
        font-size: 29px;
        color: #162949;
        line-height: 35px;
        text-align: left;
        font-style: normal;
      }
    }
    //第一个数据卡片
    // .dataCard:nth-child(1n) {
    //   background: url(@/assets/image/dataSourceCard1.png) no-repeat center center;
    //   background-size: 100% 100%;
    // }
    // //第二个数据卡片
    // .dataCard:nth-child(2n) {
    //   background: url(@/assets/image/dataSourceCard2.png) no-repeat center center;
    //   background-size: 100% 100%;
    // }
    // //第三个数据卡片
    // .dataCard:nth-child(3n) {
    //   background: url(@/assets/image/dataSourceCard3.png) no-repeat center center;
    //   background-size: 100% 100%;
    // }
    // //第四个数据卡片
    // .dataCard:nth-child(4n) {
    //   background: url(@/assets/image/dataSourceCard4.png) no-repeat center center;
    //   background-size: 100% 100%;
    // }
  }
  .businessCard {
    width: 45%;
  }
  .businessTrend{
    width: 54%;
  }

  .databaseTypeCard{
    .databaseTypeCardList{
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 29px;

      .databaseTypeCard{
        // width: 23%;
        flex: 1;
        margin: 10px;
        background: linear-gradient( 317deg, rgba(235,245,255,0.81) 0%, rgba(215,235,255,0.81) 100%);
        border-radius: 6px;
        border: 1px solid #7AA8FE;
        flex-shrink: 0;
        padding: 10px 13px;
        display: flex;
        align-items: center;
        .databaseIcon{
          width: 68px;
          height: 68px;
          margin-right: 26px;
          background-color: #fff;
          flex-shrink: 0;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .rightContent{
          .dataCardNum{
            font-family: DingTalk JinBuTi;
            font-weight: normal;
            font-size: 29px;
            color: #162949;
            line-height: 35px;
            text-align: left;
            font-style: normal;
            margin-bottom: 4px;
          }
          .dataCardTitle{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #25386D;
            line-height: 22px;
            text-align: left;
            font-style: normal;
          }
        }
      }
    }

  }
  .databaseTypeChart{
    display: flex;
    justify-content: space-between;
    .databaseTypeChartCard{
      width: 60%;
    }
    .databaseTypeBarChartCard{
      width: 38%;
    }
  }

}
